<template>
  <!--用户信息-->
  <commonDialog :model-value="modelValue" :title="title" @sure="saveUserInfo" @close="cancel">
    <el-form ref="formRef" :model="userInfo" :rules="rules" :label-width="80">
      <el-form-item label="用户名" name="username" prop="username">
        <el-input v-model="userInfo.username" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" name="password" v-if="!id" prop="password">
        <el-input v-model="userInfo.password" placeholder="请输入密码" clearable></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" name="trueName" prop="trueName">
        <el-input v-model="userInfo.trueName" placeholder="请输入真实姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" name="trueName" prop="sex">
        <el-radio-group v-model="userInfo.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" name="phone" prop="phone">
        <el-input v-model="userInfo.phone" placeholder="请输入手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱" name="email" prop="email">
        <el-input v-model="userInfo.email" placeholder="请输入邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="入职时间" name="email" prop="inductionTime">
        <el-date-picker format="YYYY-MM-DD"
                        v-model="userInfo.inductionTime" value-format="YYYY-MM-DD" type="date"
                        placeholder="请选择入职时间"/>
      </el-form-item>
      <el-form-item label="角色" name="email">
        <el-select v-model="userInfo.roleList" placeholder="请选择角色" multiple style="width: 100%" clearable>
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </commonDialog>
</template>

<script>
import { onBeforeMount, ref, toRefs, reactive } from 'vue'
import { post } from '@/utils/httpRequest'
import { addUser, updateUserInfoById, selectUserInfoByIdUrl, queryRoleListUrl } from '@/api/api'
import { ElMessage } from 'element-plus'
import { joinList } from '@/utils/util'
import { propsConst } from '@/utils/propsConstant'
import { userInfoRules } from '@/utils/verifyForm'

export default {
  name: 'userInfo',
  setup (props, { emit }) {
    const {
      title,
      type,
      id
    } = toRefs(props)
    // 用户信息
    const userInfo = ref({
      username: null,
      trueName: null,
      sex: 1,
      phone: null,
      email: null,
      password: '123456',
      inductionTime: null,
      roleList: []
    })
    const rules = reactive(userInfoRules)
    // 角色列表
    const roleList = ref([])
    const formRef = ref()
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const saveUserInfo = () => {
      formRef.value.validate().then(async () => {
        let result
        switch (type.value) {
          case 1:
            result = await post(addUser, userInfo.value)
            break
          case 2:
            result = await post(updateUserInfoById, userInfo.value)
        }
        if (result.code === 200) {
          ElMessage.success(`${title.value}成功！`)
          emit('save')
          cancel()
        }
      }).catch(() => {
        ElMessage.warning('请确认信息填写完整')
      })
    }
    const getRoleListAsync = async () => {
      const result = await post(selectUserInfoByIdUrl, { id: id.value })
      if (result.code === 200) {
        userInfo.value = result.data
        userInfo.value.roleList = joinList(userInfo.value.roleList, 'id', '', false)
      }
    }
    onBeforeMount(async () => {
      // 查询角色列表
      const result = await post(queryRoleListUrl, {})
      if (result.code === 200) {
        roleList.value = result.data
      }
      switch (type.value) {
        case 2:
          await getRoleListAsync()
          break
      }
    })
    return {
      roleList,
      title,
      rules,
      saveUserInfo,
      cancel,
      formRef,
      userInfo
    }
  },
  props: propsConst
}
</script>

<style scoped>

</style>
